<script>

import {getMyTeam, getTeam} from "@/api/modules/ranks";

export default {
  name: "ranks",
  data() {
    return {
      list3: [
        'https://cdn.uviewui.com/uview/swiper/swiper3.png',
        'https://cdn.uviewui.com/uview/swiper/swiper2.png',
        'https://cdn.uviewui.com/uview/swiper/swiper1.png',
      ],
      myTeam: [],
      teamList: []
    }
  },
  mounted() {
    this.getMyTeamPageFn()
  },
  methods: {
    async getMyTeamPageFn() {
      const params = {
        name: "",
        pageRequest: {
          current: 10,
          size: 1
        }
      }
      getMyTeam(params).then((code, data) => {
        if (code === 0 && data) {
          this.myTeam = data?.records
        }
      })

      getTeam(params).then((code, data) => {
        if (code === 0 && data) {
          this.teamList = data?.records
        }
      })


    },
    clickTeamFn() {

    }

  }

}
</script>

<template>
  <div class="ranks">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in list3" :key="item">
        <img style="width: 100%;height: 200px" :src="item" alt="">
      </van-swipe-item>

    </van-swipe>


    <div class="ranks-tab pd-16 pb-16 flex-between">
      <div class="left">我的队伍</div>
      <div class="flex-center">
        查看全部
        <van-icon name="arrow"/>
      </div>
    </div>
    <div class="" v-if="myTeam.length"></div>
    <div v-else class="noTeam flex-center column">
      <div class='callCont flex-center'>
        <div class='pulse'></div>
        <div class='pulse1'></div>
        <div class='pulse2'></div>

        <div class="callContBg flex-center">
          <i style="font-size: 25px;" class="icon icon-tab-add"></i>
        </div>
      </div>
      <div class="flex-center color-999">暂无队伍，点击创建</div>
      <div style="height: 30px"></div>

    </div>


    <div class="ranks-tab pd-16 pb-16 flex-between">
      <div class="left">其他队伍</div>
      <div class="flex-center">
        查看全部
        <van-icon name="arrow"/>
      </div>
    </div>

    <div @click="clickTeamFn(item)" :key="item" class="team-items flex-between pd-16" v-for="item in 10">
      <div class="team-items-left">社区救援队阿斯顿好凉快</div>
      <div class="flex-center">
        未认证
        <van-icon name="arrow"/>
      </div>
    </div>

    <div style="height: 120px"></div>


    <customTabbar></customTabbar>
  </div>
</template>

<style scoped lang="scss">
.ranks {
  width: 100%;
  height: 100vh;
  overflow: auto;

  .ranks-tab {
    width: 100%;
    color: #333333;


    .left {
      font-size: 18px;
      font-weight: bold;
    }
  }

  .noTeam {
    width: 100%;

    .callCont {

      width: 140px;
      height: 140px;
      position: relative;


      .callContBg {
        width: 70px;
        height: 70px;
        border-radius: 35px;
        background-color: rgba(57, 43, 185, 0.4);

        img {
          width: 26px;
          height: 26px;
          opacity: 0.7;
        }
      }


      @keyframes warn {
        0% {
          -webkit-transform: scale(.5);
          opacity: 0.0;
        }

        25% {
          -webkit-transform: scale(.7);
          opacity: 0.1;
        }

        50% {
          -webkit-transform: scale(1);
          opacity: 0.5;
        }

        75% {
          -webkit-transform: scale(1.1);
          opacity: 0.3;
        }

        100% {
          -webkit-transform: scale(1.25);
          opacity: 0.0;
        }
      }


      .pulse {
        position: absolute;
        box-shadow: 0 12px 30px 0 #392bb9;
        background-color: #392bb9;
        width: 140px;
        height: 140px;
        left: 0px;
        top: 0px;
        border-radius: 140px;
        z-index: 10;
        opacity: 0;
        animation: warn 1.5s ease-out;
        animation-iteration-count: infinite;
      }

      .pulse1 {
        position: absolute;
        box-shadow: 0 12px 30px 0 #392bb9;
        background-color: #392bb9;
        width: 140px;
        height: 140px;
        left: 0px;
        top: 0px;
        border-radius: 140px;
        z-index: 10;
        opacity: 0;
        animation: warn 3s ease-out;
        animation-iteration-count: infinite;
      }


    }
  }

  .team-items {
    margin-bottom: 12px;

    .team-items-left {
      font-weight: bold;
    }
  }
}

</style>